8e:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK"],"SWRDataProvider"] 90:T4168,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@paper-design/shaders-react": "0.0.53" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" const MONTHS = [ { name: "September", year: 2025, days: 30, startDay: 1 }, // Sept 1, 2025 is a Monday (1) { name: "October", year: 2025, days: 31, startDay: 3 }, // Oct 1, 2025 is a Wednesday (3) { name: "November", year: 2025, days: 30, startDay: 6 }, // Nov 1, 2025 is a Saturday (6) { name: "December", year: 2025, days: 31, startDay: 1 }, // Dec 1, 2025 is a Monday (1) ] const WEEKDAYS = ["S", "M", "T", "W", "T", "F", "S"] export default function MinimalCalendar() { const [markedDates, setMarkedDates] = useState>({}) useEffect(() => { const savedDates = localStorage.getItem("calendar-marked-dates") if (savedDates) { try { setMarkedDates(JSON.parse(savedDates)) } catch (error) { console.error("Failed to parse saved dates:", error) } } }, []) useEffect(() => { localStorage.setItem("calendar-marked-dates", JSON.stringify(markedDates)) }, [markedDates]) const today = new Date() const todayKey = `${today.toLocaleString("default", { month: "long" })}-${today.getDate()}` const isDateInFuture = (month: string, day: number) => { const dateToCheck = new Date(2025, MONTHS.findIndex((m) => m.name === month) + 8, day) // +8 because Sept is month 9 (0-indexed) return dateToCheck > today } const toggleDate = (dateKey: string, month: string, day: number) => { if (isDateInFuture(month, day)) return setMarkedDates((prev) => { const current = prev[dateKey] if (!current) return { ...prev, [dateKey]: "yes" } if (current === "yes") return { ...prev, [dateKey]: "no" } const { [dateKey]: _, ...rest } = prev return rest }) } const getDateKey = (month: string, day: number) => `${month}-${day}` const calculateStats = () => { const totalDays = MONTHS.reduce((sum, month) => sum + month.days, 0) const markedCount = Object.keys(markedDates).length const yesCount = Object.values(markedDates).filter((status) => status === "yes").length const noCount = Object.values(markedDates).filter((status) => status === "no").length const unmarkedCount = totalDays - markedCount const calculateStreaks = () => { const sortedDates = Object.entries(markedDates) .map(([key, status]) => { const [monthName, dayStr] = key.split("-") const monthIndex = MONTHS.findIndex((m) => m.name === monthName) const day = Number.parseInt(dayStr) return { monthIndex, day, status, date: new Date(2025, monthIndex + 8, day) } }) .sort((a, b) => a.date.getTime() - b.date.getTime()) let currentYesStreak = 0 let currentNoStreak = 0 let longestYesStreak = 0 let longestNoStreak = 0 let tempYesStreak = 0 let tempNoStreak = 0 // Calculate current streaks from today backwards const todayDate = new Date() for (let i = sortedDates.length - 1; i >= 0; i--) { const entry = sortedDates[i] if (entry.date <= todayDate) { if (entry.status === "yes") { currentYesStreak = currentYesStreak === 0 ? 1 : currentYesStreak + 1 currentNoStreak = 0 } else if (entry.status === "no") { currentNoStreak = currentNoStreak === 0 ? 1 : currentNoStreak + 1 currentYesStreak = 0 } break } } // Calculate longest streaks for (const entry of sortedDates) { if (entry.status === "yes") { tempYesStreak++ tempNoStreak = 0 longestYesStreak = Math.max(longestYesStreak, tempYesStreak) } else if (entry.status === "no") { tempNoStreak++ tempYesStreak = 0 longestNoStreak = Math.max(longestNoStreak, tempNoStreak) } } return { currentYesStreak, currentNoStreak, longestYesStreak, longestNoStreak } } const calculateMonthlyStats = () => { return MONTHS.map((month) => { const monthEntries = Object.entries(markedDates).filter(([key]) => key.startsWith(month.name)) const monthYes = monthEntries.filter(([, status]) => status === "yes").length const monthNo = monthEntries.filter(([, status]) => status === "no").length const monthMarked = monthEntries.length const monthTotal = month.days const monthCompletion = monthTotal > 0 ? Math.round((monthMarked / monthTotal) * 100) : 0 return { name: month.name.slice(0, 3), yes: monthYes, no: monthNo, marked: monthMarked, total: monthTotal, completion: monthCompletion, } }) } const streaks = calculateStreaks() const monthlyStats = calculateMonthlyStats() return { totalDays, markedCount, yesCount, noCount, unmarkedCount, streaks, monthlyStats, yesPercentage: markedCount > 0 ? Math.round((yesCount / markedCount) * 100) : 0, completionRate: Math.round((markedCount / totalDays) * 100), } } const stats = calculateStats() const renderMonth = (month: (typeof MONTHS)[0]) => { const days = [] // Add empty cells for days before the month starts for (let i = 0; i < month.startDay; i++) { days.push(

) } // Add all days of the month for (let day = 1; day <= month.days; day++) { const dateKey = getDateKey(month.name, day) const status = markedDates[dateKey] const isToday = dateKey === todayKey const isFuture = isDateInFuture(month.name, day) days.push(

, ) } return days } return (

The Great Lock-in of Sep-Dec 2025

{MONTHS.map((month) => (

{month.name.slice(0, 3)}

{WEEKDAYS.map((day) => (

{day}

))}

{renderMonth(month)}

))}

{/* Overall Progress */}

Overall Progress {stats.completionRate}%

{/* Quick Stats Grid */}

{stats.yesCount}

Yes

{stats.noCount}

{stats.unmarkedCount}

Left

{stats.yesPercentage}%

Yes Rate

{/* Streaks */}

Current Streaks

Yes: {stats.streaks.currentYesStreak} days

No: {stats.streaks.currentNoStreak} days

{/* Best Streaks */}

Best Streaks

Yes: {stats.streaks.longestYesStreak} days

No: {stats.streaks.longestNoStreak} days

{/* Monthly Breakdown */}

Monthly Breakdown

{stats.monthlyStats.map((month) => (

{month.name}

{month.yes} / {month.no}

{month.completion}%

))}

) }84:["$","$L8e",null,{"chatId":"f2tgUtINEir","children":["$","$L8f",null,{"data":{"@\"active-block\",\"f2tgUtINEir\",":{"id":"b_vA8RcZ6DWkX","messageId":"AcgBJ55MNmBUmwx4coOoLCkeayOP7cns","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"minimal-calendar","type":"code-project","project":"minimal-calendar","taskNameActive":"Adding localStorage","taskNameComplete":"Added localStorage"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"f2tgUtINEir\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from sahaj-jj

More Templates Like This